<!DOCTYPE html>
<html>
<head>
    <title>百科分类管理</title>
    <include file='public/head'></include>
    <style>
        .layui-legend-size {
            font-size: 14px !important;
        }

        .layui-nopadding {
            padding: 0 !important;
        }

        .layui-overflow {
            overflow: auto;
        }

        .layui-nomargin {
            margin: 0 !important;
        }

        .layui-bottom {
            border-bottom: 1px solid rgb(226, 226, 226);
        }

        .layui-input {
            height: 30px !important;
        }

        .layui-form-search-item .layui-inline {
            margin-bottom: 5px;
        }

        .layui-form-search-item label {
            margin-left: 15px;
        }

        .layui-table-page {
            padding: 7px 0px 0px;
        }

        .layui-field-padding {
            border-width: 1px;
            padding: 0 0 5px 10px;
        }

        .mytable {
            table-layout: fixed;
        }

        .mytable tr td {
            text-overflow: ellipsis;
            -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
            overflow: hidden;
            white-space: nowrap;
            text-align: left
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" lay-fliter="demo-tab">
    <!-- 顶部导航菜单开始 -->
    <div class="layui-tab-nav">
        <ul class="layui-tab-title">
            {:getNav('encyclopedias','admin_index/category')};
        </ul>
    </div>
    <!-- 顶部导航菜单结束 -->
    <br>

    <!-- 内容开始 -->
    <div class="layui-card">

        <div class="layui-card-header layui-bg-gray layui-bottom ">
            <a href="javascript:;" class="layui-btn layui-btn-xs layui-bg-blue add-btn">
                <i class="layui-icon">&#xe640;</i>添加
            </a>
            <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger sort-btn" >排序</a>
        </div>

        <!-- 数据表格开始 -->
        <form method="post" id="f">
            <table class="layui-table layui-nomargin mytable">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>排序</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <volist name="list" id="vo">
                    <tr>
                        <td>{$vo.id}</td>
                        <td>{$vo.title}</td>
                        <td align="center">
                            <input type="hidden" name="id[]" value="{$vo.id}" >
                            <input style="width: 50px;text-align:center; "  name="listorder[{$vo.id}]" type="text" size="5" value="{$vo.sort |default = 0}">
                        </td>
                        <td>
                            <img src="{$vo.imgurl}" style="height: 30px;">
                        </td>
                        <td>
                            <button type="button" data-catid="{$vo.id}" class="layui-btn layui-btn-primary layui-btn-xs updata-btn" title="修改"><i class="layui-icon">&#xe642;</i></button>
                            <button type='button' class='layui-btn layui-btn-xs layui-btn-primary delete-btn' style='font-weight:800 ;' data-id='{$vo.id}' title='删除'><i class='layui-icon'>&#xe640;</i></button>
                        </td>
                    </tr>
                </volist>
                </tbody>
            </table>

            <!--分页开始-->
            <div class="layui-table-page">
                <div id="layui-table-page1">
                    <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
                        {$page|default=''}
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- layui-tab开始 -->
</body>

<include file="public/scripts"/>
<script>
    //添加表单
    $('.add-btn').on('click', function () {
        let url = "{:cmf_plugin_url('encyclopedias://admin_index/addCategoryPage')}";
        layer.open({
            type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            , title: '添加'//层的标题
            , shadeClose: true//是否点击遮罩关闭
            , shade: 0.8//遮罩
            , area: ['800px', '500px']//宽高
            , btn: ['提交', '关闭']//弹框按钮
            , fixed: false//固定
            , offset: '130px'
            , content: url //iframe的url
            , yes: function (index, layero) {
                //子页面的请求操作都放子页面
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.tijiao();
            }
            , btn2: function (index, layero) {
            }
        });
    });

    //编辑表单
    $('.updata-btn').on('click',function(){
        let catid = $(this).data('catid');
        let url = "{:cmf_plugin_url('encyclopedias://admin_index/editCategoryPage')}?id="+catid;
        layer.open({
            type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            ,title: '修改'//层的标题
            ,shadeClose: true//是否点击遮罩关闭
            ,shade: 0.8//遮罩
            ,area: ['800px', '500px']//宽高
            ,btn:['提交','关闭']//弹框按钮
            ,fixed:false//固定
            ,offset:'130px'
            ,content: url //iframe的url
            ,yes:function(index, layero){
                //子页面的请求操作都放子页面
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.tijiao();
            }
            ,btn2:function(index, layero){
            }
        });
    });

    $('.delete-btn').on('click',function(){
        var text = "确定要删除吗？";
        let id = $(this).data('id');
        let url = "{:cmf_plugin_url('encyclopedias://admin_index/delCategory')}";
        layer.confirm(text, {icon: 3, title:'提示', btn: ['确定','取消']}, function(index,layero){
            $.ajax({
                url:url,
                data:{id:id},
                success:function(data){
                    if (data.code == 1) {
                        layer.msg(data.msg,{icon:1,time:1500},function(){
                            window.location.reload();
                        });
                    } else {
                        layer.msg(data.msg,{icon:2,time:1500});
                    }
                },
                error:function(){
                    layer.msg('系统错误',{icon:2,time:1500});
                }
            })
        },function(index){
            // alert('取消');
        });
    })


    //排序
    $('.sort-btn').on('click',function(){
        var sort = $('#f').serialize();
        $.ajax({
            url:"{:cmf_plugin_url('encyclopedias://admin_index/listorder')}",
            type:'post',
            data:sort,
            success:function(data){
                if (data.code == 1) {
                    layer.msg(data.msg,{icon:1,time:1200,offset:'280px'},function(){
                        window.location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:1200,offset:'280px'});
                }

            },
            error:function(data){
                console.log(data);
                layer.msg('系统错误',{time:1200,icon:5});
            }
        })
    })

</script>
</html>